<template>
	<div class="main">
		<div class="mians">
			<!-- 左边搜索栏 -->
			<div class="left">
				<button>查询内容</button>
				<input type="text" placeholder="请输入要搜索的的内容..."/>
			</div>
			
		</div>
		<div class="one">
			<h4>好评最高5本书</h4>
			<ul>
				<li v-for="(i,index) in imgList" :key='index'>
					<img :src="`${$Imgurl}/api/public/showImg/${i.picture}`"/>
					<p>{{i.name}}</p>
					<p>￥<span>{{i.price}}</span><button>购买</button></p>
				</li>
			</ul>
		</div>
		<!-- 第二个书籍 -->
		<div class="two">
			<h4>销量最高5本书</h4>
			<ul>
				<li v-for="(i,index) in imgList" :key='index'>
					<img :src="`${$Imgurl}/api/public/showImg/${i.picture}`"/>
					<p>{{i.name}}</p>
					<p>￥<span>{{i.price}}</span><button>购买</button></p>
				</li>
			</ul>
		</div>
		<!-- 第三个书籍 -->
		<div class="three">
			<h4>意向最高5本书</h4>
			<ul>
				<li v-for="(i,index) in imgList" :key='index'>
					<img :src="`${$Imgurl}/api/public/showImg/${i.picture}`"/>
					<p>{{i.name}}</p>
					<p>￥<span>{{i.price}}</span><button>购买</button></p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Main',
		data(){
			return{
				imgList : [],
				imgURL : ''
			}
		},
		created(){
			// 发起异步请求
			this.axios.get('/api/public/book/findFav5').then( (res)=>{
				for(let i in res.data.data){
					this.imgList.push(res.data.data[i])
				}
				console.log(this.imgList)
			}).catch( (error)=>{
				console.log(error);
			})
		}
	}
</script>

<style scoped>
.mians{
	margin: 20px auto;
	background-color: white;
	width: 95%;
	border-radius: 15px;
	padding-bottom: 10px;
}
.mians .left button{
	border: none;
	background-color: white;
	border-radius: 20px;
	width: 100px;
	line-height: 30px;
	font-size: 20px;
	color: black;
	font-weight: bold;
	margin: 15px;
}
.mians .left  input{
	width: 300px;
	height: 50px;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	text-indent: 1em;
}
.mians .lefttu{
	text-align: center;
}
.one{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
}
.one h4{
	font-size: 30px;
	color: mediumvioletred;
	margin: 20px 30px;
}
.one ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.one ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 0.5rem;
}
.one p button{
	margin-left: 10px;
}
.two{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
	margin-top: 20rem;
}
.two{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
}
.two h4{
	font-size: 30px;
	color: mediumvioletred;
	margin: 20px 30px;
}
.two ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.two ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 1rem;
}
.two p button{
	margin-left: 10px;
}
.three{
	width: 95%;
	border-bottom: 2px solid orangered ;
	margin-left: 30px;
}
.three h4{
	font-size: 30px;
	color: mediumvioletred;
	margin-top: 20rem;
	margin-bottom: 2rem;
	margin-left: 2rem;
	display: block;
}
.three ul li{
	width: 10%;
	float: left;
	margin-top: 20px;
	text-align: center;
	display: block;
	margin-left: 8%;
}
.three ul li img{
	width: 150px;
	height: 180px;
	margin-bottom: 1rem;
}
.three p button{
	margin-left: 10px;
}

</style>